<template>
	<view class="scenceIndex">
		<!-- 	<view class="concern">


		<view class="concernLeft">
			<image src="../../static/img/s3.png" style="width: 200upx;height: 180upx;" class="hotelImg"></image>
		</view>
		<view class="concernRight">
			<text class="hoteltxt">热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店热门酒店</text>
			<text class="concernNum">5.4人收藏</text>
		</view>
		
	</view> -->

		<view id="cover" @click="isCover" v-if="isShow">
			<view class="changeCityList">
				<text class="changeCityListItem" v-for="item in changeCityList" @click="selectCity(item.name)">
					{{item.name}}
				</text>
			</view>
		</view>


		<view class="scenceIndexSearch">
			<view class="">
				<image src="../../static/img/icon_home_search.png" style="width: 30upx;height: 32upx;position: absolute;top: 60upx;left: 64upx;"
				 class=""></image>
				<input class="uni-input SearchInput" v-model="searchCityName" placeholder="" />
				<text class="" style="position: absolute;top: 55upx;right: 200upx;color: #2B91E2;z-index: 22;" @click="searchCity">搜索</text>
			</view>
			<view class="" style="position: absolute;top: 60upx;right: 20upx;" @click="showCities">
				<image src="../../static/img/icon_scence_more.png" style="width: 20upx;height: 10upx;margin-right: 10upx;" class=""></image>
				{{localCity}}
			</view>
		</view>

		<view class="">
			<view class="cityListTitle">
				当季推荐
			</view>
			<view class="cityList">
				<view class="cityListItem" v-for="item in cityList" @click="goDetail(item)">
					<image :src="item.variousImg" style="width: 300upx;height: 200upx;" class="noDataImg"></image>
					<view class="cityListItemBom">
						<view class="cityListItemName">
							{{item.variousName}}
						</view>
						<view class="fs-15">
							<text class="fw-bold">{{item.pageviews}}</text>
							浏览
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<view class="fz15 h-c tab-wrapper">
				<view class="inline-block tab" :class="tabVal == 0 ? 'active' : ''" @click="changetab(0)">综合排序</view>
				<view class="" style="border-right: 1px solid #e6e6e6;height: 35upx;"></view>
				<view class="inline-block tab" :class="tabVal == 1 ? 'active' : ''" @click="changetab(1)">推荐度</view>
			</view>
			<view class="sortList" v-for="item in sortList" @click="goDetail(item)">

				<view class="sortListLeft">
					<image class="img" :src="item.hostImg" style="width: 220upx;height: 190upx;margin: 20upx 34upx 0 34upx;"></image>
				</view>
				<view class="sortListRight">
					<view class="sortListItemName">
						{{item.name}}
					</view>
					<view class="fs-15" style="margin-left: 10upx;">
						<text class="">
							<text class="fw-bold">{{item.pageviews}}</text>
							浏览</text>
						<text class="" style="margin-left: 20upx;">
							<text class="fw-bold">{{item.recommendNum}}</text>
							人推荐</text>
					</view>
					<view class="sortListItemAdr fs-15">
						{{item.contactAddress}}
					</view>
					<view class="sortListItemTicket" v-if="item.price">
						<text class="">
							<text class="" style="border: 1px solid #16BF5A; color: #16BF5A;margin-right: 20upx;font-size: 18upx;">订</text>
							<text class="fs-24">门票</text>
						</text>
						<text class="">
							<text class="sortListItemTicketPrice">
								<text class="fs-15">￥</text>
								{{item.price}}

							</text>
							<text class="fs-15 color888">
								起
							</text>
						</text>
					</view>
					<view class="sortListItemTicket" v-if="item.price == null">
						<text class="">
							<text class="fs-15" style="border: 1px solid #16BF5A; color: #16BF5A;margin-right: 20upx;">订</text>
							<text class="fs-24">门票</text>
						</text>
						<text class="">
							<text class="sortListItemTicketPrice">
								<text class="fs-15"></text>
								免费

							</text>
							<text class="fs-15 color888">

							</text>
						</text>
					</view>
				</view>

			</view>
			<view class="fz14 tc h-8 signtips">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			if(options&&options.city) {
				this.localCity = options.city;
			} else {
				this.localCity = this.pub.getLocalcity();
			}
		},
		data() {
			return {
				localCity: "兰州市",
				tabVal: 0,
				page: 1,
				tips: '正在加载...',
				isOnReachBottom: false,
				sortList: [],
				cityList: [],
				changeCityList: [],
				searchCityName: '',
				isShow: false
			}
		},
		components: {

		},

		onShow() {
			this.getSort();
			this.getData()
		},
		onReachBottom: function() {
			this.page++
			if (this.isOnReachBottom) {
				this.changetab(this.tabVal, true)
			}
		},
		methods: {
			searchCity() {
				this.page = 1;
				this.getData()
			},
			isCover() {
				this.isShow = false;
				// document.body.style.overflow="auto";
			},
			selectCity(name) {
				console.log(name)
				if (this.localCity != name) {
					this.localCity = name;
					this.page = 1;
					this.getData();
				}
				this.isShow = false;
			},
			showCities() {
				this.isShow = !this.isShow;
				if (this.isShow) {
					this.changeCityList = this.pub.getCities();
					if (!this.changeCityList || this.changeCityList.length == 0) {
						this.getCities()
					}
				}
			},
			//获取数据
			getCities() {
				this.$postApi(this.$path.GET_CITY_LIST, {
					parentId: "14000",
				}).then(data => {
					if (data.data.success) {
						this.changeCityList = data.data.reListData;
						this.pub.setCities(this.changeCityList);
					}
				})
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.SEARCH_SOPT, {
					id: '',
					name: this.searchCityName,
					page: this.page,
					rows: 8,
					cityAddress: this.localCity,
					type: this.tabVal
				}).then(data => {
					if (data.data.success) {
						console.log(data, '1111')
						// this.sortList = data.data.rows
						if (data.data.rows.length == 0 && this.page == 1) {
							this.sortList = []
						}
						if (data.data.rows.length !== 0) {
							if (this.page == 1) {
								this.sortList = []
							}
							this.tips = ''
							this.isOnReachBottom = true
							this.sortList = this.sortList.concat(data.data.rows)
						} else {
							this.tips = '没有更多数据了'
							this.isOnReachBottom = false
						}
					}
				})
			},
			//获取数据
			getSort() {
				this.$postApi(this.$path.QUERY_SHOW_CHILD_INFO, {
					positionId: 7
				}).then(data => {
					if (data.data.success) {
						console.log(data, '22')
						this.cityList = data.data.items
						// this.sortList = data.data.rows
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			changetab(val, isPush) {
				if (!isPush) {
					this.tabVal = val
					this.page = 1
				}
				this.getData()
			},
			goDetail(item) {
				var items
				if (item.id) {
					items = {
						id: item.id,
					}

				} else {
					items = {
						id: item.variousId,
					}
				}
				uni.navigateTo({
					url: '/pages/scence/scencedetail?item=' + encodeURIComponent(JSON.stringify(items)),
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	#cover {
		position: fixed;
		left: 0px;
		top: 90px;
		background-color: #000;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		// filter:alpha(opacity=60);   
		// display:none; 
		z-Index: 20;

		.changeCityList {
			// position:absolute;left:0px;top:0px;
			background-color: white;
			width: 100%;
			height: 300upx;
			opacity: 1;
			z-Index: 21;

			// display: flex;
			// filter:alpha(opacity=0); 
			.changeCityListItem {
				border: 1upx solid #16BF5A;
				color: #16BF5A;
				word-wrap: break-all;
				margin: 20upx;
				margin-top: 10upx;
				padding: 5upx;
				display: inline-block;
			}
		}
	}

	.scenceIndexSearch {
		position: fixed;
		top: 50upx;
		width: 100%;
		height: 130upx;
		// padding-bottom: 50upx;
		z-index: 10;
		background: white;

		.SearchInput {
			padding-left: 50upx;
			width: 520upx;
			box-sizing: border-box;
			box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			margin: 50upx;
		}
	}

	.cityListTitle {
		font-size: 36upx;
		font-weight: bold;
		margin: 120upx 10upx 20upx 10upx;
	}

	.cityList {
		display: flex;
		overflow-x: scroll;

		.cityListItem {
			// display: flex;
			// flex-direction: column;
			margin: 10upx;
			// padding: 0upx 34upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			border-radius: 10upx;
			// height: 235upx;
			box-sizing: border-box;

			.cityListItemBom {
				margin: 10upx;
				padding-bottom: 50upx;

				.cityListItemName {
					font-size: 36upx;
					font-weight: bold;
				}
			}

		}
	}

	.sortList {
		display: flex;
		width: 100%;
		padding: 34upx;
		border-bottom: 1px solid #cccccc;

		.sortListRight {
			width: 100%
		}

		.sortListItemName {
			font-size: 36upx;
			font-weight: bold;
			margin: 10upx;
		}

		.sortListItemNum {
			font-weight: bold;
			margin: 10upx;
		}

		.sortListItemAdr {
			margin: 10upx 10upx 20upx 10upx;
		}

		.sortListItemTicket {
			margin: 10upx;
			padding-top: 20upx;
			border-top: 1upx dashed #cccccc;
			display: flex;
			justify-content: space-between;

			.sortListItemTicketPrice {
				color: #FE5A34;
			}
		}
	}

	.tab-wrapper {
		display: flex;
		justify-content: space-around;
		padding: 20upx 40upx 0upx;
		margin-bottom: 20upx;
		// padding-bottom: 30upx;
		border-bottom: 1upx solid #e6e6e6;

		.tab {
			padding-bottom: 12upx;
			border-bottom: 4upx solid transparent;

			&.active {
				border-bottom-color: #2B91E2;
			}
		}
	}
</style>
